<template>
  <zm-dialog
    title="选择适用影院分组"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
  >
    <el-checkbox
      v-model="isAll"
      @change="handleIsAll"
      :indeterminate="indeterminate"
    >
      全选
    </el-checkbox>

    <el-tree
      node-key="id"
      ref="elTree"
      show-checkbox
      :data="dataTree"
      :props="{ label: 'name', children: 'children' }"
      @check-change="handleChange"
    ></el-tree>
    <div slot="footer" class="tr">
      <zm-button @click="dialogClose" type="info">取消</zm-button>
      <zm-button @click="reset" type="danger">重置</zm-button>
      <zm-button @click="onSave" type="primary">保存</zm-button>
    </div>
  </zm-dialog>
</template>
<script>
import dialogMixin from '@/mixins/dialogMixin'
import cloudApis from '@/api/src/cloud'
export default {
  name: 'ChooseRelation',
  components: {},
  mixins: [dialogMixin],
  props: {
    selectedArr: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      isAll: false,
      indeterminate: false,
      dataTree: [],
      count: 0
    }
  },
  computed: {

  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    // 获取影院分组树形数据
    async init () {
      const _res = await cloudApis.getCinemaGroupList()
      this.dataTree = _res.list
      this.count = _res.count
      // 已选数据回填处理
      if (this.selectedArr.length > 0) {
        this.setCheckedKeys(this.selectedArr)
      }
    },
    // elTree 重置
    reset () {
      this.$refs.elTree.setCheckedKeys([])
    },
    // 设置已选项
    setCheckedKeys (val) {
      this.$refs.elTree.setCheckedKeys(val)
    },
    // 是否全选
    handleIsAll (val) {
      const ids = this.dataTree.map((i) => i.id)
      if (val) {
        this.setCheckedKeys(ids)
      } else {
        this.reset()
      }
    },
    handleChange (val) {
      const _len = this.$refs.elTree.getCheckedNodes().length
      this.isAll = _len === this.count
      this.indeterminate = _len > 0 && _len < this.count
    },
    onSave () {
      const _res = this.$refs.elTree.getCheckedNodes()
      this.$emit('handle-after', _res)
      this.dialogClose()
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
